<template>
	<view class="container">
		<view class="search">
			<u-row>
				<u-col span="11">
					<u-search shape="round" :show-action="false" v-model="searchValue" @search="search()" @custom="search()"></u-search>
				</u-col>
				<u-col span="1">
					<u-icon name="list-dot" size="40"  label="分类" label-size="18" label-pos="bottom" @click="toCategoryPage()"></u-icon>
				</u-col>
			</u-row>
		</view>
		<view class="box"></view>
		

		<view class="goods_list">
			<goods-list @goodsItemClick="goGoodsDetail" :goods="goods"></goods-list>
		</view>

		<u-divider v-if="flag">到底啦</u-divider>
		
		<u-back-top :scroll-top="scrollTop" :icon-style="iconStyle"></u-back-top>
	</view>
</template>

<script>
	import goodsList from '@/components/goods-list/goods-list.vue'

	import {
		getGoodsList
	} from '@/api/goods.js'

	export default {
		components: {
			"goods-list": goodsList
		},
		data() {
			return {
				pageNum: 1,
				pageSize: 10,
				searchValue: '',  // 搜索框内容
				goods: [],        // 商品列表
				flag: false,      // 触底标识
				scrollTop: 0,     // 返回顶部
				iconStyle: {
					fontSize: '32rpx',
					color: '#007aff'
				}
			}
		},
		methods: {
			toCategoryPage(){
				uni.navigateTo({
					url: '/pages/category/category'
				})
			},
			search() {
				this.pageNum = 1
				this.goods = []
				this.flag = false
				this.getGoodsList()
			},
			// 页面跳转
			toPage(url) {
				this.$u.route(url)
			},
			getGoodsList() {
				let params = {}
				params.pageNum = this.pageNum;
				params.pageSize = this.pageSize;
				if (this.searchValue) {
					params.goodsName = this.searchValue;
				}

				getGoodsList(params).then(res => {
					// 数据追加
					this.goods = [...this.goods, ...res.rows]
				})
			},
			// 导航到商品详情页
			goGoodsDetail(goodsId) {
				this.$u.route('/pages/goods-detail/goods-detail', {
					goodsId: goodsId
				})
			}
		},
		onLoad() {
			this.getGoodsList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.pageNum = 1
			this.goods = []
			this.flag = false
			this.getGoodsList();
			uni.stopPullDownRefresh();
		},
		// 下滑触底
		onReachBottom() {
			if (this.goods.length < this.pageNum * 10) {
				return this.flag = true
			}
			this.pageNum++
			this.getGoodsList()
		},
		// 返回顶部
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>
<style lang="scss">
	@import "./index.scss";
</style>
